import { useGetLessonsByThemeId } from "@/entities/lesson/model/useGetLessonsByThemeId"
import LessonLink from "@/entities/lesson/ui/LessonLink"
import { Canvas3d } from "@/shared/3d/Canvas3d"
import { UiSpinner } from "@/shared/Uikit/UiSpinner"
import { Environment, Gltf, OrbitControls } from "@react-three/drei"
import { useEffect } from "react"

type ChooseLessonProps = {
    themeId: number
}


export default function ChooseLesson(props: ChooseLessonProps) {
    const { lessons,
        isSuccess,
        isLoading,
        error,
        refetch
    } = useGetLessonsByThemeId(props.themeId)

    return (
        <>
            {isSuccess && lessons && !!lessons.length && (
                <div className='h-full w-full flex'>
                    <Canvas3d className='h-screen w-[80%]' camera={{ position: [2, 0, 0] }}>
                        <ambientLight />
                        <Environment files={'/assets/hdri.exr'} />

                        <OrbitControls
                            enablePan={false}
                            target={[0, 1, 0]}
                            maxDistance={2.5}
                            minAzimuthAngle={0}
                            maxAzimuthAngle={Math.PI}
                            minPolarAngle={0}
                            maxPolarAngle={Math.PI / 2}
                        />
                        <Gltf src='/assets/machine.glb' />
                        <Gltf src='/assets/room.glb' position={[-2, 0, 0]} scale={2} />
                    </Canvas3d>
                    <div>
                        {lessons.map((lesson) => {
                            return <LessonLink
                                lessonId={lesson.id}
                                key={lesson.id}
                            />
                        })}
                    </div>
                </div>
            )}
            {isSuccess && lessons && !lessons.length && (
                <div>
                    Уроков не найдено
                </div>
            )}
            {isLoading && <UiSpinner className='size-10' />}
            {error && <p className='text-red-500'>ошибка</p>}
        </>
    )

}

